<script lang="ts" name="person-new" setup>
import {ref, watch} from 'vue'


//数据
let person = ref({
  name: '张三',
  age: 24
})

function changeName () {
  person.value.name += '~'
}
function changeAge () {
  person.value.age += 1
}

function changePerson () {
  person.value = {
    name: '李四',
    age: 90
  }
}

//监视 情况一: 监视[ref]定义的[对象类型数据],监视的是对象的地址值,若想监视对象内部属性的变化,需要手动开启深度监视{deep: true}
/*watch 的
  第一个参数: 被监视的数据,
  第二个参数: 监视的回调,
  第三个对象: 配置对象 (deep, immediate....)
*/
watch(person , (newValue, oldValue) => {
  console.log('person变化了',newValue, oldValue,',监视的是整个对象')
}, {deep: true})
//immediate:立即的监视,一开始就会直接执行打印的数据这是新值:{name: '张三', age: 24} 这是旧值: undefined
//如果修改的是ref定义的对象中属性,newValue和oldValue 都是新值,因为他们是同一个对象
//如果修改的是整个ref定义的对象,newValue是新值,oldValue是旧值,因为不是同一个对象了
</script>

<template>
  <div class="person">
    <h1>情况二: 监视[ref]定义的[对象类型数据]</h1>
    <h2>姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>